<template>
	<view>
		<cu-custom  :isBack="true" textColor="#000000">
			<block slot="backText">返回</block>
			<block slot="content">搜索课程</block>
		</cu-custom>

		<scroll-view class="s-all-wrap" scroll-y :style="'height:' + scrollH+'rpx;'" style="">
			<view class="search-all-wrap" style=" padding-top: 10rpx;padding-bottom: 10rpx;">
				<view class="search-wrap" style="margin: 0rpx 20rpx;background-color: #fff;">
					<image class="search_home" src="../../static/search_home.png"></image>
					<input  v-model="sdata" 
							class="uni-input" 
							@input="onInput" 
							style="background-color: #FFFFFF;"
							confirm-type="search" 
							placeholder=" 搜索课程"
							placeholder-style="color:#C7C7C7;" />
				</view>
				<text @click="resetSearch" class="reset-search" style="position: relative;
    bottom: 12rpx;color: #3694EF;">取消</text>
			</view>
			<view class="search-history" :class="{showsearch : (isShowHis == true)}">
				<template v-if="searchKechengList">
					<template v-if="searchKechengList.length >0">
						<view class="course">
							<view class="search-title-wrap">
								<text class="s-course-title">相关课程</text>
							</view>
							<view class="search-course-info">
								<view @click="viewContentInfo(item.kechengId)" 
										class="live-list" v-for="(item, index) in searchKechengList" 
										:key="index"
										style="height: 240rpx;"
										>
									<view class="live-list-img-wrap" style="margin-top: 37rpx;">
										<image class="live-list-img" :src="item.kechengImg" mode="aspectFill"></image>
				<!-- 						<template>
											<text class="course-title-icon">课程</text>
										</template> -->
									</view>
									<view class="live-list-info">
										<view class="live-c-title" style="height: 40rpx;">{{item.kechengName}}</view>
										<view class="live-status-tuwen live-status-tuwen1">系列课程</view>
										<view class="live-teacher-price">
											<image class="live-teacher-avatar" :src="item.teacherImg" mode="aspectFill"></image>
											<text class="teacher-name">{{item.kechengTeacher}}</text>
											<view class="price-wrap">
												<text class="free">免费</text>
											</view>
										</view>
										<view class="" style="">{{item.showDetp}}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</template>
			</view>
			<template v-if="kongkong == true">
				<view class="xiangziwrap">
					<image class="xiangzi" src="../../static/images/xiangzi.png" mode="aspectFill"></image>
					<text class="xiangzi_txt">未检索到课程</text>
				</view>
			</template>
		</scroll-view>
	</view>
</template>
<script>
	const app = getApp();
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量
				
				searchKechengList: {}, //搜索出的课程列表
				kongkong: true,  //是否显示未搜索出内容
				isShowHis: false,  //是否显示课程列表
				searchKeyword: '', //搜索框输入的值
				sdata: '',
				scrollH: 0,
				system_top: 10,
			}
		},
		onReady() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
				}
			});
		},
		onLoad(option) {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					// #ifdef MP-WEIXIN
					that.system_top = parseInt(res.safeArea.top) + 5;
					// #endif
				}
			});
		},
		methods: {
			// 取消 回到首页
			resetSearch() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 键盘输入时 触发事件
			onInput(e) {
				if (e.detail.value == '' || e.detail.value == null) {
					this.searchKechengList = [];
					this.isShowHis = false;
				}
				this.searchKeyword = e.detail.value;
				this.getHomeSearch(this.searchKeyword); // 搜索方法
			},
			getHomeSearch(keyword) {
				if(keyword == undefined || keyword == '' || keyword == null){
					this.kongkong = true;
				}else{
					uni.request({
						url: app.globalData.serve_study_url + "kechengList",
						method: 'GET',
						data: {
							'kechengName': keyword
						},
						success: res => {
							this.searchKechengList = res.data.rows;
							this.kongkong = false;
							this.isShowHis = true;
						},	
					});
					
				}
			},
			// 跳转看课页面
			viewContentInfo(kechengId) {
				uni.navigateTo({
					url: '../../packageB/pages/content-info/content-info?kechengId=' + kechengId,
				});
			},
		}
	}
</script>
<style>
	@import url("/static/css/search/search.css");
	@import url("/static/css/course_list.css");
	page {
		overflow: scroll; /*页面禁止滑动*/
		background: radial-gradient(circle farthest-side at 0 0,rgb(214, 244, 254) 0%,rgb(255, 255, 255) 100%) no-repeat;
	}
    .live-list {
    	width: 95%;
    	height: 190rpx;
    	margin: 30rpx auto;
    	padding-top: 20rpx;
    	box-shadow: 0rpx 0rpx 4rpx 2rpx rgba(0, 0, 0, 0.1);
    	border-radius: 8rpx;
    	background-color: #FFFFFF;
    }
	.line {
		width: 100%;
		height: 1rpx;
		background-color: #D3D3D3;
		position: relative;
	}
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}
	.free{
	padding-left: 20rpx;
	padding-top: 7rpx;
	background-color: rgb(234, 255, 244);
	height: 45rpx;
	width: 70rpx;
	line-height: 40rpx;
	border-radius: 11rpx;
	}
	.live-status-tuwen1{
		color: rgb(103, 167, 238);
		background-color: rgb(233, 243, 250);
		border: none;
		width: 87rpx;
	}
</style>